import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Home from './pages/Home'
import About from './pages/About'
import Page1 from './pages/Page1.jsx'
import ErrorPage from "./ErrorPage";
import Wiki from './pages/Wiki'
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "home",
        element: <Home />,
        children:[
          {
            path:'page1',
            element:<Page1/>
          }
        ]
      },
      {
        path: "about",
        element: <About />,
      },
      {
        path: "/wiki/:keyword",
        element: <Wiki />,
      },
    ]
  },

]);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);


// import { useRoutes } from "react-router-dom";

// const routes = useRoutes([
//   { path: "/", element: <Home /> },
//   {
//     path: "/invoices",
//     element: <Invoices />,
//     children: [
//       { path: ":id", element: <Invoice /> },
//       { path: "/pending", element: <Pending /> },
//       { path: "/complete", element: <Complete /> },
//     ],
//   },
// ]);

// export default function App() {
//   return (
//     <div>
//       <Navbar />
//       {routes}
//     </div>
//   );
// }

// export default function App() {
//   return (
//     <div>
//       <Navbar />
//       <Routes>
//         <Route path="/" element={<Home />} />
//         <Route path="/invoices" element={<Invoices />}>
//           <Route path=":id" element={<Invoice />} />
//           <Route path="pending" element={<Pending />} />
//           <Route path="complete" element={<Complete />} />
//         </Route>
//       </Routes>
//     </div>
//   );
// }